<template>
  <div class="confirm-order">
    <p class="top">购买账号：{{info.mobile}}</p>
    <div class="goods-details">
      <span class="img"><img v-if="info.img" :src="info.img" alt=""></span>
      <div class="cons">
        <p class="title">「课程」 {{info.title}}</p>
        <p class="info">¥{{info.price}} &nbsp; | &nbsp; {{info.audio}}</p>
      </div>
    </div>
    <div class="flex all">
      <p class="left">商品合计</p>
      <p class="right">¥{{info.price}}</p>
    </div>
    <div class="flex all">
      <p class="left">支付方式</p>
      <p class="right"><img src="@/assets/gongyizhifu02.png" alt=""> 微信支付</p>
    </div>
    <div class="fixed clear">
      <p class="price">应付： <span>¥{{info.price}}</span></p>
      <p class="toPay" @click="course_pay">去付款</p>
    </div>
  </div>
</template>

<script>
import { AlertModule } from 'vux';
import { couresOrder, coursePay } from '@/api/api';
import { wexinPay } from '@/config/wxpay'
  export default {
    components: {
    },
    data () {
      return {
        info: {},
      }
    },
    created () {
      this.goodsId = this.$route.query.goodsId
      this.coures_order()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      coures_order() {
        couresOrder(this.goodsId).then((res) => {
          if(res.data.code == 200){            
            this.info = res.data.data;
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      course_pay() {
        var dataJson = {
          id: this.goodsId,
        }
        coursePay(dataJson).then((res) => {
          if(res.data.code == 731){
            AlertModule.show({
              title: '温馨提示',
              content: res.data.msg,
              onHide: () => {
                this.$router.push({path: 'bindPhone'})
              }
            })    
            return;
          }
          wexinPay(res.data.data.jsapi, (sucRes) => {
            this.$router.push({path: 'paySuccess', query: {order_id: res.data.data.order}})
          }, (err) => {
            console.dir(err)
          })
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.confirm-order
  height 100vh
  background-color #f5f5f5
  .top
    font-size 1.3rem
    line-height 5rem
    height 5rem
    background-color #fff
    padding-left 1.6rem
    color #000
    margin-bottom 1rem
  .goods-details
    background-color #fff
    padding 1.5rem
    display flex
    border-bottom 1px solid #e6e6e6
    .img
      height 7rem
      display flex
      width 12.5rem
      max-width 12.5rem
      img
        object-fit cover
    .cons
      width calc(100% - 14rem)
      margin-left 1.5rem
      height 7rem
      .title
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        font-size 1.5rem
        color #333
        font-weight 500
        margin-left -.8rem
      .info
        color #666
        font-size 1.3rem
        margin-top 1rem
        font-weight 500
  .all
    line-height 5rem
    height 5rem
    margin-bottom 1rem
    padding 0 1.6rem
    background-color #fff
    .left
      float left
      font-size 1.5rem
      color #666
      font-weight 400
    .right
      float right
      color #333
      font-weight 500
      font-size 1.5rem
      position relative
      img
        position absolute
        width 2.2rem
        left -3.2rem
        top 1.5rem
  .fixed
    position fixed
    bottom 0
    height 5rem
    line-height 5rem
    width 100%
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .toPay
      width 42%
      background-color #172F6D
      color #fff
      text-align center
      font-size 1.5rem
      font-weight 500
      float left
      box-sizing border-box
    .price
      box-sizing border-box
      float left
      padding-left 1.6rem
      color #333
      font-size 1.6rem
      width 58%
      background-color #fff
      span
        font-size 1.5rem
</style>
